<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" show-fullscreen destroy-on-close width="750px" @close="close">
		<el-form ref="formRef" label-width="100px" :model="formData" :rules="rules">
			<el-form-item label="工序编号" prop="procCode">
				<el-input
					v-model.trim="formData.procCode"
					placeholder="请输入工序编号"
					:maxlength="32"
					show-word-limit
					:disabled="mode == 'edit'"
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="工序名称" prop="procName">
				<el-input
					v-model.trim="formData.procName"
					placeholder="请输入工序名称"
					:maxlength="32"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="工位集合" prop="opIds">
				<OpMultiTableSelect v-model="opSelectValue" @change="change" />
				<div class="el-form-item-msg">选择多个工位时，必须属于同一条产线</div>
			</el-form-item>
			<el-form-item label="工艺分类" prop="classify">
				<el-radio-group v-model="formData.classify">
					<el-radio
						v-for="item in classifyOptions"
						:key="item.value"
						:label="item.value"
						>{{ item.label }}</el-radio
					>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="工艺类型" prop="procTypeCode">
				<el-select v-model="formData.procTypeCode" class="m-2" placeholder="请选择工艺类型">
					<el-option v-for="item in procTypeOptions" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-form-item>
			<el-form-item label="是否禁用" prop="isDisabled">
				<el-switch v-model="formData.isDisabled" />
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
import OpMultiTableSelect from "../../components/OpMultiTableSelect";

export default {
	components: { OpMultiTableSelect },
	emits: ['complete'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			classifyOptions: [],
			procTypeOptions: [],
			opSelectValue: [],
			formData: {
				id: 0,
				procCode: '',
				procName: '',
				lineId: undefined,
				opIds: undefined,
				opCodes: undefined,
				classify: undefined,
				procTypeCode: '',
				procTypeName: '',
				isDisabled: false,
			},
			rules: {
				procCode: [{ required: true, message: "请选择工序编号", trigger: "blur" }],
				procName: [{ required: true, message: "请工序名称", trigger: "blur" }],
				opIds: [{ required: true, message: "请选择工位", trigger: "blur" }],
				classify: [{ required: true, message: "请选择工艺分类", trigger: "blur" }],
				procTypeCode: [{ required: true, message: "请选择工艺类型", trigger: "blur" }],
			},
		};
	},
	methods: {
		change(items) {
			this.formData.opIds = items.map(s => s.id);
			this.formData.opCodes = items.map(s => s.opCode);
		},
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				let resp = await this.$API.procprocess.model.get(row.id);
				this.formData = resp.data;

				this.opSelectValue = [];
				for (var i = 0; i < this.formData.opIds.length; i++) {
					this.opSelectValue.push({ id: this.formData.opIds[i], opCode: this.formData.opCodes[i] })
				}
			}

			const resp2 = await this.$API.enumlist.model.get('procClassifyEnum');
			this.classifyOptions = resp2.data;

			const resp3 = await this.$API.syscodetype.bycode.get('mes_process_type');
			this.procTypeOptions = resp3.data.codes.map(s => ({ name: s.name, code: s.codeValues }));

			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;

					const option = this.procTypeOptions.find(s => s.code === this.formData.procTypeCode);
					this.formData.procTypeName = option.name;

					let resp = null;
					if (this.formData.id === 0) {
						resp = await this.$API.procprocess.add.post(this.formData);
					} else {
						resp = await this.$API.procprocess.update.put(this.formData);
					}
					this.isSaveing = false;
					if (resp.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("保存成功");
					} else {
						this.$alert(resp.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.opSelectValue = [];
			this.formData = {
				id: 0,
				procCode: '',
				procName: '',
				opLineId: undefined,
				opIds: undefined,
				opCodes: undefined,
				classify: undefined,
				procTypeCode: '',
				procTypeName: '',
				isDisabled: false,
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
